<template>
  <view class="content">
    <view class="phoneText">
      <view class="">输入新手机号</view>
      <view class="">
        原手机号
        <text>{{phone}}</text>
      </view>
    </view>
    <!-- 手机号 -->
    <view class="phone">
      <view class="v1">
        <text class="v1Text">手机号</text>
        <u--input type="number" v-model="mobile" border="none" clearable placeholder="输入新手机号" @change='change'>
        </u--input>
      </view>
      <u-line color="#E6E6E6"></u-line>
      <view class="v1">
        <text class="v1Text">验证码</text>

        <view class="vCode">
          <u--input type="number" v-model="newCode" border="none" clearable placeholder="输入验证码" @change='change'>
          </u--input>
          <button class="login_from_bot flex_shrink" plain v-show="show" @click="getCode">获取验证码</button>
          <button class="login_from_bot sending flex_shrink" plain v-show="!show">{{ count }}s后重新获取</button>
        </view>
      </view>
      <u-line color="#E6E6E6"></u-line>
    </view>

    <view class="bottom">
      <button v-if='!buttonShow' :disabled="confirming"  :loading="confirming"
        color="#F5F5F5" style="color: #CCCCCC;font-size: 32rpx;font-weight: 500;border-radius: 32rpx;">确认更改</button>
      <button v-else @click="confirmSubmit" :disabled="confirming"  :loading="confirming"
        color="#FF5900" style="color: #fff;font-size: 32rpx;font-weight: 500;border-radius: 32rpx;">确认更改</button>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import { mapGetters } from 'vuex';
import pageMixin from '@/mixins/pageMixin';
import { GetCode, changePhone } from '@/api/login/login';
export default {
  mixins: [pageMixin],
  components: {},
  data () {
    return {
      //短信提示
      show: true,
      count: '',
      timer: null,
      mobile: '',
      newCode: '',
      confirming: false,
      buttonShow: false,
    };
  },
  computed: {
    ...mapGetters(['phone'])
  },
  onLoad (options) { },
  methods: {
    //获得验证码
    getCode () {
      let that = this;
      var error = ''; // eslint-disable-line no-unused-vars
      if (this.mobile == '') {
        error = '请输入手机号';
      } else {
        //手机
        let reg = /^1[3-9][0-9]{9}$/;
        if (!reg.test(this.mobile)) {
          error = '手机号格式有误';
        }
      }
      if (error) {
        uni.showToast({
          title: error,
          icon: 'none',
          mask: false,
          duration: 2000
        });
        return;
      }
      GetCode({ phone: this.mobile }).then(res => {
        uni.showToast({
          title: '验证码已发送',
          icon: 'success',
          mask: false,
          duration: 2000
        });
        this.timeRun();
      }).catch(err => {
        console.log(err)
        if (err == '短信发送成功') {
          uni.showToast({
            title: '验证码已发送',
            icon: 'success',
            mask: false,
            duration: 2000
          });
          this.timeRun();
        }
      })

    },
    timeRun () {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    change () {
      if (this.mobile.length > 0 && this.newCode.length > 0) {
        this.buttonShow = true
      } else {
        this.buttonShow = false
      }
    },
    confirmSubmit () {
      if (this.mobile == this.phone) {
        uni.$u.toast('手机号重复，请重试');
        return
      }
      changePhone({ code: this.newCode, phone: this.mobile }).then(res => {
        uni.$u.toast('修改成功!');
      }).catch(err => {
        uni.$u.toast(err);
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #fff;
  width: 100%;
  height: 100vh;
  padding: 0 60rpx;
}
.phoneText {
  padding-top: 100rpx;
  view:nth-child(1) {
    height: 48rpx;
    font-size: 48rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 48rpx;
  }
  view:nth-child(2) {
    margin-top: 20rpx;
    height: 28rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 28rpx;
    text {
      margin-left: 15rpx;
    }
  }
}
.login_from_bot {
  height: 64rpx;
  line-height: 60rpx;
  font-size: 15px;
  border: solid 0px $base-color;
  color: $base-color;
  background-color: transparent;
  padding-left: 26rpx;
  border-radius: 25px;
  background-color: #fff;
  // background-color: rgba(132, 111, 253, 0.1);
  border: 1px solid #FF5900;
}
.phone {
  padding-top: 100rpx;
  .v1 {
    display: flex;
    justify-content: left;
    align-items: center;

    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 100rpx;
    .v1Text {
      margin-right: 30rpx;
    }
    .vCode {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.bottom {
  padding-top: 100rpx;
}
</style>
